﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>评论列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="favicon.ico">
    @Html.Style("~/scripts/layuiadmin/layui/css/layui.css")
    @Html.Style("~/scripts/layuiadmin/style/admin.css")
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="query-filter">
                <div class="layui-form-item">
                    <div class="layui-inline" style="width:130px;">
                        <select name="contentType">
                            <option value="0">评论类型</option>
                            <option value="1">文字</option>
                            <option value="2">图片</option>
                        </select>
                    </div>
                    <div class="layui-inline" style="width:130px;">
                        <select name="commentStatus">
                            <option value="0">评论状态</option>
                            <option value="1">已评论</option>
                            <option value="2">未评论</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input type="hidden" name="videoId" value="@ViewBag.VideoId" />
                        <input type="text" class="layui-input" name="uniqueId" placeholder="抖音号" />
                    </div>
                    <div class="layui-inline">
                        <input type="text" class="layui-input" name="nickName" placeholder="账号昵称" />
                    </div>
                    <div class="layui-inline">
                        <input type="text" class="layui-input" name="clientName" placeholder="客户端" />
                    </div>
                    <div class="layui-btn-group">
                        <a class="layui-btn" id="btnSearchData">搜索</a>
                        <a class="layui-btn" id="btnAddNew">新增</a>
                    </div>
                    <div class="layui-btn-group">
                        <a class="layui-btn layui-btn-danger" id="btnDelete">批量删除</a>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="dataList" lay-filter="dataList"></table>
            </div>
        </div>
    </div>
    <script id="editDataDialog" type="text/html">
        <div class="layui-form" style="margin:20px;" lay-filter="data-form">
            <div class="layui-form-item">
                <label class="layui-form-label">评论类型</label>
                <div class="layui-inline" style="width:350px;">
                    <select name="contentType" id="contentType" lay-filter="content-type-filter">
                        <option value="1">文字</option>
                        <option value="2">图片</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">评论内容</label>
                <div class="layui-inline" style="width:350px;">
                    <input type="hidden" name="id" value="0" class="layui-input" />
                    <input type="hidden" name="videoId" value="@ViewBag.VideoId" />
                    <input type="text" name="content" id="content" class="layui-input" placeholder="请输入评论内容（如果是图片请上传）" />
                </div>
                <div class="layui-inline" style="width: 50px;">
                    <button type="button" class="layui-btn layui-hide" id="btnUpload">上传</button>
                </div>
            </div>
        </div>
    </script>
    @Html.Script("~/scripts/layuiadmin/layui/layui.js")
    @Html.Script("~/scripts/qiniu.min.js")
    <script type="text/javascript">
        var dataTableObj = undefined;
        layui.use(['form', 'layer', 'table', 'upload', 'element'], function () {
            var layer = layui.layer,
                form = layui.form,
                laydate = layui.laydate,
                table = layui.table,
                upload = layui.upload,
                element = layui.element,
                $ = layui.$,
                table = layui.table;
            var initSort = { field: 'id', type: 'desc' };

            initData();

            $('#btnAddNew').click(function () {
                showDialog(null);
            });

            function showDialog(data) {
                layui.layer.open({
                    title: data ? "修改数据" : "新增数据",
                    type: 1,
                    btn: ['确定', '取消'],
                    area: ['600px', '250px'],
                    offset: '100px',
                    content: $('#editDataDialog').html(),
                    success: function (layero, index) {
                        if (data) {
                            form.val('data-form', data);
                        }

                        upload.render({
                            elem: '#btnUpload'
                            , accept: 'file'
                            , url: '/admin/upload'
                            , done: function (res, index, upload) {
                                if (res.code == 1) {
                                    $('#content').val(res.data);
                                } else {
                                    layer.msg('上传失败');
                                }
                            }, error: function (index, upload, res) {
                                layer.msg('上传失败');
                                console.log(res);  // 返回值（纯文本）
                            }
                        });

                        form.on('select(content-type-filter)', function (data) {
                            if (data.value == 1) {
                                $('#btnUpload').addClass('layui-hide');
                            } else {
                                $('#btnUpload').removeClass('layui-hide');
                            }
                        });

                        form.render();
                    },
                    yes: function (index, layero) {
                        var formData = form.val('data-form');
                        var url = '/admin/comment/add';

                        if (formData.id > 0) {
                            url = '/admin/comment/edit';
                        }

                        $.post(url, formData, function (res) {
                            if (res.code == 1) {
                                layer.close(index);
                                initData();
                            } else {
                                layer.msg(res.msg);
                            }
                        });
                    }
                });
            }

            $('#btnSearchData').click(function () {
                initData();
            });

            $('#btnDelete').click(function () {
                var ids = getCheckDatas();

                if (ids.length > 0) {
                    layer.confirm('确定要删除所选数据吗？', { title: '提示', btn: ['确定', '取消'] }, function (index) {
                        $.post('/admin/comment/delete', { ids: idss }, function (data) {
                            if (data.code == 1) {
                                layer.close(index);
                                initData();
                            } else {
                                layer.msg(data.msg);
                            }
                        });
                    });
                }
            });

            function getCheckDatas() {
                var datas = [];
                var checkStatus = table.checkStatus('dataList')
                    , checkData = checkStatus.data; //得到选中的数据

                if (checkData.length === 0) {
                    layer.msg('请选择数据');
                } else {
                    for (var i = 0; i < checkData.length; i++) {
                        datas.push(checkData[i].id);
                    }
                }

                return datas;
            }

            table.on('tool(dataList)', function (obj) {
                var layEvent = obj.event,
                    data = obj.data;

                if (layEvent === 'delete') {
                    $.post('/admin/comment/delete', { ids: [data.id] }, function (res) {
                        if (res.code == 1) {
                            initData();
                        } else {
                            layer.msg(res.msg);
                        }
                    });
                } else if (layEvent === 'edit') {
                    showDialog(data);
                } else if (layEvent === 'dialog') {
                    layer.photos({
                        photos: {
                            "title": "图片评论",
                            "start": 0,
                            "data": [
                                {
                                    "alt": "图片评论",
                                    "pid": 5,
                                    "src": data.content,
                                }
                            ]
                        },
                        footer: false // 是否显示底部栏 --- 2.8.16+
                    });
                }
            });

            function initData() {
                var where = form.val("query-filter");
                where.field = initSort.field;
                where.type = initSort.type;

                table.render({
                    elem: '#dataList',
                    url: '/admin/comment/list',
                    cellMinWidth: 95,
                    method: 'post',
                    page: true,
                    limit: 20,
                    limits: [20, 30, 50],
                    id: "dataList",
                    where: where,
                    request: {
                        pageName: 'pageIndex', //页码的参数名称，默认：page
                        limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    },
                    response: {
                        statusName: 'code' //规定数据状态的字段名称，默认：code
                        , statusCode: 1 //规定成功的状态码，默认：0
                        , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                        , countName: 'count' //规定数据总数的字段名称，默认：count
                        , dataName: 'data' //规定数据列表的字段名称，默认：data
                    },
                    cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        {
                            field: 'content', title: '内容', align: "center", templet: function (d) {
                                if (d.contentType == 1) {
                                    return d.content;
                                } else if (d.contentType == 2) {
                                    return '<div lay-event="dialog" class="layui-font-green" style="cursor:pointer;">点击查看图片</div>';
                                }
                            }
                        },
                        {
                            field: 'contentType', title: '类型', align: "center", width: 100, templet: function (d) {
                                if (d.contentType == 1) {
                                    return '文字';
                                } else if (d.contentType == 2) {
                                    return '图片';
                                }
                            }
                        },
                        {
                            field: 'uniqueId', title: '评论账号', align: "center", width: 170, templet: function (d) {
                                if (d.addTime != d.commentTime) {
                                    return d.uniqueId;
                                } else {
                                    return d.uniqueId;
                                }
                            }
                        },
                        {
                            field: 'nickName', title: '评论账号昵称', align: "center", width: 170, templet: function (d) {
                                if (d.addTime != d.commentTime) {
                                    return d.nickName;
                                } else {
                                    return d.nickName;
                                }
                            }
                        },
                        { field: 'clientName', title: '客户端', align: "center", width: 150 },
                        {
                            field: 'commentTime', title: '评论时间', align: "center", width: 150, templet: function (d) {
                                if (d.addTime != d.commentTime) {
                                    return d.commentTime.substr(5, 11);
                                } else {
                                    return '';
                                }
                            }
                        },
                        {
                            field: 'addTime', title: '添加时间', align: "center", width: 150, templet: function (d) {
                                return d.addTime.substr(5, 11);
                            }
                        },
                        {
                            title: '操作', align: "center", width: 150, templet: function (d) {
                                return '<div><a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a></div>';
                            }
                        }
                    ]]
                });
            }
        });
    </script>
</body>
</html>